<template>
  <div class="flex-center" v-if="infos.length" :style="wrapStyle">
    <div :style="obj.box" v-for="(obj, i) in styleObj" :key="i">
      <img :style="obj.img" :src="obj.info.img" alt="" @click="onClick(obj.info)" @load="imgLoaded(obj.info.show_event_id)"/>
    </div>
  </div>
</template>
<script setup lang="ts" name="activityBanner">
import { defineProps, inject, computed, ref, watch } from "vue";
import { storeToRefs } from 'pinia'
import { systemAppStore } from '@/stores/system'
import { userAppStore } from '@/stores/user'
import { debounce } from '@/utils'
import { requestConfig, checkTwgShow } from '@/utils/costum-config'
import { jumpConfigURL } from '@/utils/costum-api'
import { reportInfoApi } from "@/xz-fn";
const _systemAppStore_ = systemAppStore();
const _userAppStore_ = userAppStore();
const { appInfo } = storeToRefs(_systemAppStore_);
const { hasLogin,  userInfo } = storeToRefs(_userAppStore_);
const props = defineProps({
  autoRefresh: {
    type: Boolean,
    default: true
  },
  region: {
    type: Number
  }
});
const infos = ref(<any>[]);
const wrapStyle = computed(() => {
  return infos.value.length > 1 ? {
    'column-gap': '12px'
  } : {}
});
const styleObj = computed(() => {
  if (!infos.value.length) {
    return []
  }

  return infos.value.map((info:any) => {
    const { url } = info
    let { width, height } = info
    if(width === '100%'){
      height = 'auto'
    }

    width = typeof width === 'number' ? (width + 'px'): width
    height = typeof height === 'number' ? (height + 'px'): height
    const boxStyle = {
      height,
      width,
      margin: '0 auto'
    }
    const imgStyle: any = {
      'display': 'block',
      height,
      width,
      'object-fit': 'contain',
      'margin': '0 auto'
    }
    if(url){
      imgStyle['cursor'] = 'pointer'
    }
    return {
      box: boxStyle,
      img: imgStyle,
      info
    }
  })
});
const refresh_ = debounce(() => {
  getData()
}, 1000)
const handerWidthChange = inject<() => void>("handerWidthChange");
watch(hasLogin, () => {
  if(!props.autoRefresh) return
  refresh_()
});
watch(userInfo, (newValue: any, oldValue: any) => {
  if(!props.autoRefresh) return
  if(!hasLogin.value) return
  const oldBuyRightPackage = oldValue?.buy_right_package || []
  const newBuyRightPackage = newValue?.buy_right_package || []

  const isChange = newBuyRightPackage.some((item: {pkg_id: string, expire_at: number|string})  => {
    const info = oldBuyRightPackage.find((oldItem: {pkg_id: string}) => oldItem.pkg_id === item.pkg_id)
    return info && info.expire_at !== item.expire_at
  })
  isChange && refresh_()
});

getData();

function getData(){
  requestConfig('fytgw')
    .then((res: any) => {
      const showRegion = props.region
      const list: any = res?.params || []
      const nowTime = Date.now()
      const installDate = appInfo.value.installDate
      const list2 = list.filter((it: any) => {
        const { region, img } = it
        return region === showRegion && img && checkTwgShow({ configItem: it, nowTime, userInfo: userInfo.value, installDate })
      }).sort((a: { weight:number },b: { weight:number }) => b.weight - a.weight).slice(0, 1)

      if(list2){
        const fixConfig = {
          '1': {
            width: 'auto',
            height: '26px'
          }
        }[showRegion+'']

        const multi = list2.length > 1

        if (fixConfig && multi) {
          fixConfig.width = '50%'
        }

        list2.forEach((info: any) => {
          fixConfig && Object.assign(info, fixConfig)
        })
      }
      infos.value = list2
    })
}
function onClick(info:any){
  const { event_id, url } = info
  event_id && reportInfoApi(event_id)
  jumpConfigURL(url)
}
function imgLoaded(show_event_id: number) {
  show_event_id && reportInfoApi(show_event_id)
  if(props.region === 1){
    handerWidthChange?.()
  }
}
</script>
